<template>
    <div>
        <div class="container">
            <div class="demo">
                <wxc-minibar title="收入红包"
                             background-color="#009ff0"
                             text-color="#FFFFFF"
                             @wxcMinibarLeftButtonClicked="minibarLeftButtonClick"
                             @wxcMinibarRightButtonClicked="minibarRightButtonClick"></wxc-minibar>
            </div>
        </div>
        <div style="width:1300px;min-height:1000px">
            <div class="wrapper">
                <scroller class="scroller">
                    <text class="jilu">+1630 请教我群 10:24:01   2018-1-10 10:24:01</text>
                    <text class="jilu">+60   请教我群 10:24:01   2018-1-10 10:24:01</text>
                    <text class="jilu">+130  请教我群 10:24:01   2018-1-10 10:24:01</text>
                    <text class="jilu">+13   请教我群 10:24:01   2018-1-10 10:24:01</text>
                    <text class="jilu">+122  请教我群 10:24:01   2018-1-10 10:24:01</text>
                    <text class="jilu">+130  请教我群 10:24:01   2018-1-10 10:24:01</text>
                    <text class="jilu">+131  请教我群 10:24:01   2018-1-10 10:24:01</text>
                    <text class="jilu">+1530 请教我群 10:24:01   2018-1-10 10:24:01</text>
                    <text class="jilu">+1380 请教我群 10:24:01   2018-1-10 10:24:01</text>
                    <text class="jilu">+20   请教我群 10:24:01   2018-1-10 10:24:01</text>
                    <text class="jilu">+1630 请教我群 10:24:01   2018-1-10 10:24:01</text>
                    <text class="jilu">+60   请教我群 10:24:01   2018-1-10 10:24:01</text>
                    <text class="jilu">+130  请教我群 10:24:01   2018-1-10 10:24:01</text>
                    <text class="jilu">+13   请教我群 10:24:01   2018-1-10 10:24:01</text>
                    <text class="jilu">+122  请教我群 10:24:01   2018-1-10 10:24:01</text>
                    <text class="jilu">+130  请教我群 10:24:01   2018-1-10 10:24:01</text>
                    <text class="jilu">+131  请教我群 10:24:01   2018-1-10 10:24:01</text>
                    <text class="jilu">+1530 请教我群 10:24:01   2018-1-10 10:24:01</text>
                    <text class="jilu">+1380 请教我群 10:24:01   2018-1-10 10:24:01</text>
                    <text class="jilu">+20   请教我群 10:24:01   2018-1-10 10:24:01</text>
                    <text class="jilu">+1630 请教我群 10:24:01   2018-1-10 10:24:01</text>
                    <text class="jilu">+60   请教我群 10:24:01   2018-1-10 10:24:01</text>
                    <text class="jilu">+130  请教我群 10:24:01   2018-1-10 10:24:01</text>
                    <text class="jilu">+13   请教我群 10:24:01   2018-1-10 10:24:01</text>
                    <text class="jilu">+122  请教我群 10:24:01   2018-1-10 10:24:01</text>
                    <text class="jilu">+130  请教我群 10:24:01   2018-1-10 10:24:01</text>
                    <text class="jilu">+131  请教我群 10:24:01   2018-1-10 10:24:01</text>
                    <text class="jilu">+1530 请教我群 10:24:01   2018-1-10 10:24:01</text>
                    <text class="jilu">+1380 请教我群 10:24:01   2018-1-10 10:24:01</text>
                    <text class="jilu">+20   请教我群 10:24:01   2018-1-10 10:24:01</text>
                </scroller>
            </div>
        </div>
    </div>
</template>

<script>
    import { WxcMinibar } from 'weex-ui';
    const modal = weex.requireModule('modal');

    export default {
        components: { WxcMinibar },
        methods: {
            minibarLeftButtonClick () {
            },
            minibarRightButtonClick () {
                modal.toast({ 'message': 'click rightButton!', 'duration': 1 });
            }
        }
    };
</script>

<style scoped>
    .tip{
        width: 750px;
        height: 100px;
        font-size: 48px;
        font-weight: bold;
        display: flex;
        display: -webkit-flex;
        justify-content:center;
        align-items:center;
        background-color: #00B4FF;

    }
    .scroller {
        width:750px;
        min-height:1000px;
        margin-left:0px;
        display: flex;
        display: -webkit-flex;
        justify-content:center;
        align-items:center;
        flex-wrap: wrap;
    }
    .jilu{
        border-color: #00B4FF;
        border-bottom-width: 1px;
        min-height: 50px;
        line-height: 50px;
        display: flex;
        display: -webkit-flex;
        justify-content:center;
        align-items:center;
        flex-wrap: wrap;
    }
</style>